<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<!-- <view class="nav-bar">
			<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="nav-content">
				<view class="nav-left" @click="goBack">
					<u-icon name="arrow-left" color="#333" size="18"></u-icon>
				</view>
				<view class="nav-title">认养详情</view>
				<view class="nav-right"></view>
			</view>
		</view> -->
		<view class="main-content">
			<!-- 项目图片/视频区域 -->
			<view class="media-section">
				<view class="media-container">
					<image v-if="currentMediaType === 'image'" class="project-image" :src="projectInfo.fieldImage" mode="aspectFill"></image>
					<video v-else class="project-video" :src="projectInfo.fieldAudio" controls></video>
				</view>
				<view class="media-type-tabs">
					<view class="tab-item" :class="{ active: currentMediaType === 'image' }" @click="switchMediaType('image')">图片</view>
					<view class="tab-item" :class="{ active: currentMediaType === 'video' }" @click="switchMediaType('video')">视频</view>
				</view>
			</view>
			<!-- 价格、标题、描述 -->
			<view class="field-info" style="height: 150px;">
				<view class="price-row">
					<view v-if="selectedPlot ==null">
						<text class="price">{{projectInfo.plotPrice}}</text>
						<text class="price-desc">元起</text>
					</view>
					<view v-else>
						<text class="price" >{{selectedPlot.plotPrice}}</text>
						<text class="price-desc">元</text>
					</view>
					
				</view>
				<view class="field-title">{{ projectInfo.fieldName }}</view>
				<view class="field-desc">{{ projectInfo.fieldLocation }}，{{ projectInfo.fieldType }}</view>
				<view class="field-location">
					<u-icon name="map" color="#4CAF50" size="18"></u-icon>
					<text>济南市历城区</text>
					<u-icon name="arrow-right" color="#bbb" size="14"></u-icon>
				</view>
			</view>
			<!-- 选择土地 -->
			<view class="choose-field-section">
			<view class="choose-title-row">
				<text class="choose-title">选择土地</text>
				<text class="choose-count">剩余{{stock}}/{{total}}</text>
			</view>
			<view class="choose-status">
				<view class="status-item status-available"></view><text>可选</text>
				<view class="status-item status-selected"></view><text>选中</text>
				<view class="status-item status-rented"></view><text>已租</text>
			</view>
			<scroll-view scroll-x class="field-scroll-horizontal" style="height: 250px;">
				<view 
					v-for="(item, idx) in fieldList" 
					:key="item.plotId" 
					:class="{'field-item': true, 'selected': item.plotStatus == 0, 'rented': item.plotStatus == 2}"
					@click="selectField(idx); getPlotById(item.plotId)">
					<view class="field-item-texts" style="height: 200px;">
						<text class="field-area">{{item.plotArea}}㎡</text>
						<text class="field-name">{{item.plotName}}</text>
					</view>
					<u-icon class="field-icon" name="checkbox-mark" color="#fff"></u-icon>
				</view>
			</scroll-view>
			</view>
			<!-- 租赁周期 -->
			
			<view class="rent-period-row">
				<text class="rent-title">租赁周期</text>
				<text class="rent-tip" style="color:#f00; margin-left:10px; text-align:right;" @click="showPicker = true">请选择租赁周期 &gt;</text>
				<u-popup :show="showPicker" mode="bottom" @close="showPicker = false">
					<view class="picker-container">
						<view class="picker-header">
							<text class="cancel" @click="showPicker = false">取消</text>
							<text class="title">选择租赁时长</text>
							<text class="confirm" @click="confirmRentPeriod">确定</text>
						</view>
						<picker-view class="picker-view" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
							<picker-view-column>
								<view class="item" v-for="(item, index) in days" :key="index">{{item}}天</view>
							</picker-view-column>
						</picker-view>
					</view>
				</u-popup>
			</view>
			<!-- 地块服务 -->
			<view class="service-section">
				<view class="service-item" v-for="(item, idx) in serviceList" :key="item.id" :class="{active: selectedService===idx}" @click="selectedService=idx">
					<text class="service-title">{{item.serviceName}}</text>
					<text class="service-price" :style="{color: selectedService===idx?'#f00':'#888'}">{{item.servicePrice}}元/天</text>
					<text class="service-desc">{{item.serviceDesc}}</text>
				</view>
			</view>
			<!-- 种子列表 -->
			<view class="seed-section">
				<view class="seed-title-row">
					<text class="seed-title">种子列表</text>
					<text class="seed-more" >查看更多 &gt;</text>
				</view>
				<view class="seed-list">
					<view class="seed-item" v-for="seed in seedList" :key="seed.id">
						<image :src="seed.cropImg" class="seed-img"/>
						<view class="seed-info">
							<text class="seed-name">{{seed.cropName}}</text>
							<br/>
							<text class="seed-yield">预计产量:{{seed.cropProduction}}kg/m²</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 土地详情 -->
			<view class="field-detail-section">
				<view class="detail-title">土地详情</view>
				<view class="detail-content">
					{{ projectInfo.fieldDescription }}
				</view>
			</view>
			
		</view>
		<!-- 底部导航栏 -->
		<view class="bottom-nav">
			<view class="nav-buttons">
				<view class="nav-button" @click="goHome">
					<u-icon name="home" color="#666" size="24"></u-icon>
					<text>首页</text>
				</view>
				<view class="nav-button" @click="shareField">
					<u-icon name="share" color="#666" size="24"></u-icon>
					<text>分享</text>
				</view>
				<view class="nav-button" @click="contactService">
					<u-icon name="server-man" color="#666" size="24"></u-icon>
					<text>客服</text>
				</view>
			</view>
			<view class="rent-button" @click="rentNow">立即租赁</view>
		</view>
	</view>
</template>

<script>
	import request from '@/util/request.js';

	export default {
		data() {
			return {
				showPicker: false,
				selectedDay:0,
				serviceType:"",
				days: [31,90,365],
				value: [0],
				indicatorStyle: 'height: 50px;',
				selectedPlot: null,
				statusBarHeight: 0,
				visible: true,
				currentMediaType: 'image', // 当前媒体类型：image/video
				stock: 0,
				total: 0,
				projectInfo: {
					field_id: null,
					field_name: "",
					field_location: "",
					field_type: "",
					field_image: "",
					field_audio: "",
					field_area: "",
					field_description: "",
					owner_id: "",
					field_status: "",
				
				},
				fieldList: [
					{id:1, area:2, name:'小小菜园', status:'available'},
				
				],
				serviceList: [
					{id:1, title:'全托管', price:'￥0.01/天', desc:'你啥都不用管，俺全包了'},
					{id:2, title:'半托管', price:'￥0.01/天', desc:'管一半'},
					{id:3,title:'不托管', price:'￥0.00/天', desc:'自己管理'},
				],
				selectedService: 0,
				seedList: [],
				selectedSeeds: [], // 已选择的种子列表
				
			}
		},
		methods: {
			
			//获取播种列表
			getSeedList(){
				request({
					url: `/land-service/land/getCropList`,
					method: 'GET',
					
				}).then(res => {
					if(res.code == 200) {
						let seedList = res.data.crops
						seedList = seedList.map(item => ({
							...item,
							cropImg: `http://121.36.197.175:19000/test/${item.cropImg}`
						}))
						this.seedList = seedList
						// console.log(seedList)
					
					}
				})
			},
			//获取服务列表
			getServiceList() {
				request({
					url: `/land-service/land/getTypes`,
					method: 'GET',
				}).then(res => {
					if(res.code == 200) {
						this.serviceList = res.data.types;
						console.log(this.serviceList)
					}
				})
			},
			// 返回上一页
			// goBack() {
			// 	uni.navigateBack();
			// },
			bindChange(e) {
				const val = e.detail.value;
				this.value = val;
				// 可以在这里处理选择变化后的逻辑
				
			},
			confirmRentPeriod() {
				this.selectedDay = this.days[this.value[0]];
				console.log('选择的租赁天数：', this.selectedDay);
				this.value= [0];
				this.showPicker = false;
		
			},
			// 切换媒体类型
			switchMediaType(type) {
				this.currentMediaType = type;
			},
		// 获取地块详情信息
			async getFieldDetail(fieldId) {
				try {
					const res = await request({
						url: `/land-service/land/selectById1/${fieldId}`,
						method: 'GET',
						// data: {
						// 	fieldId: fieldId
						// }
					});
					
					if(res.code === 200) {
						this.projectInfo = res.data.field;
						this.projectInfo.fieldImage = `http://121.36.197.175:19000/test/${res.data.field.fieldImage}`;
						this.projectInfo.fieldAudio = `http://121.36.197.175:19000/test/${res.data.field.fieldAudio}`;
					} else {
						uni.showToast({
							title: res.message || '获取地块详情失败',
							icon: 'none'
						});
					}
				} catch(e) {
					uni.showToast({
						title: '获取地块详情失败',
						icon: 'none'
					});
					console.error('获取地块详情失败:', e);
				}
			},
			getFieldList(fieldId) {
				request({
					url: `/land-service/land/selectByOwnerId/${fieldId}`,
					method: 'GET',
					
				}).then(res => {
					if(res.code == 200) {
						let fieldList = res.data.plots;
						fieldList.map(item => {
							return {
								...item,
								status: item.plotStatus == 1 ? 'available' : 'rented'
							}
						})
						this.fieldList = fieldList;
					}else {
						uni.showToast({
							title: res.message || '获取地块列表失败',
							icon: 'none'
						});
					}
				})
			},
			selectField(idx) {
				this.fieldList.forEach((item, i) => {
					if(item.plotStatus !== 2) {item.plotStatus = (i == idx ? 0 : 1)}
				})
			},
			//获取剩余地块数量
			getStock(fieldId) {
				request({
					url: `/land-service/land/selectAll`,
					method: 'GET',
					data: {
						fieldId: fieldId,
						plotStatus: 1
					}
				}).then(res => {
					this.stock = res.data.total;
				})
			},
			//获取所有地块数量
			getTotal(fieldId) {
				request({
					url: `/land-service/land/selectAll`,
					method: 'GET',
					data: {
						fieldId: fieldId,
					}
				}).then(res => {
					this.total = res.data.total;
				})
			},
			getPlotById(plotId){
				request({
					url: `/land-service/land/selectAll`,
					method: 'GET',
					data: {
						plotId: plotId,
					}
				}).then(res => {
					if(res.code == 200) {
						this.selectedPlot = res.data.plots[0];
						
					}
				})
			},
			// 返回首页
			goHome() {
				uni.switchTab({
					url: '/pages/home/home'
				});
			},
			// 分享功能
			shareField() {
				uni.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				});
			},
			// 联系客服
			contactService() {
				uni.openCustomerServiceChat({
					extInfo: {url: '您的客服链接'},
					corpId: '您的企业ID',
					success(res) {}
				});
			},
			// 立即租赁
			rentNow() {
				if (!this.selectedPlot) {
					uni.showToast({
						title: '请先选择地块',
						icon: 'none'
					});
					return;
				}
				if (!this.selectedDay) {
					uni.showToast({
						title: '请选择租赁周期',
						icon: 'none'
					});
					return;
				}
				uni.removeStorageSync('plotOrderNum');
				uni.removeStorageSync('seedToOrder');
				uni.removeStorageSync('fieldOrder');
				uni.removeStorageSync('fieldInfo');
				// console.log(this.selectedPlot.plotPrice)
				// console.log(this.serviceList[this.selectedService].servicePrice)
				// console.log(this.selectedDay)
				// console.log(Number(this.selectedPlot.plotPrice)+Number(this.serviceList[this.selectedService].servicePrice)*Number(this.selectedDay))
				// 数据提交
				uni.setStorageSync('fieldInfo', {
                    fieldName: this.projectInfo.fieldName,
                    plotName: this.selectedPlot.plotName,
                    plotId: this.selectedPlot.plotId,
                    plotArea: this.selectedPlot.plotArea,
                    serviceName: this.serviceList[this.selectedService].serviceName,
					serviceId: this.serviceList[this.selectedService].id,
					servicePrice: this.serviceList[this.selectedService].servicePrice,
                    leastTime: this.selectedDay,
					seedList: this.seedList,
					plotPrice: this.selectedPlot.plotPrice,
					// 转成小程序时出现NaN，通常是因为参与运算的某个值为undefined或null，Number(undefined)会变成NaN
					// 建议先做类型和有效性判断，避免NaN
					totalPrice: 
						(Number(this.selectedPlot && this.selectedPlot.plotPrice ? this.selectedPlot.plotPrice : 0) +
						Number(
							this.serviceList && this.serviceList[this.selectedService] && this.serviceList[this.selectedService].servicePrice
								? this.serviceList[this.selectedService].servicePrice
								: 0
						) * 
						Number(this.selectedDay ? this.selectedDay : 0)
						)
                })
				uni.navigateTo({
					url: '/pages/farm/fieldOrder'
				});
			}
		},
		onLoad(options) {
	
			// 获取url中的fieldId参数
			this.projectInfo.fieldId = options.fieldId;
			console.log(this.projectInfo.fieldId)
			// this.getFieldDetail(this.projectInfo.fieldId);
			// this.getFieldList(this.projectInfo.fieldId);
			// this.getStock(this.projectInfo.fieldId);
			// this.getTotal(this.projectInfo.fieldId);
			// this.getServiceList();
			// this.getSeedList();	
			this.getFieldDetail(this.projectInfo.fieldId);
			this.getFieldList(this.projectInfo.fieldId);
		},
		mounted() {
			this.getStock(this.projectInfo.fieldId);
			this.getTotal(this.projectInfo.fieldId);
			this.getServiceList();
			this.getSeedList();
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}
	
	/* 自定义导航栏 */
	.nav-bar {
		background-color: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}
	
	.status-bar {
		width: 100%;
		background-color: #ffffff;
	}
	
	.nav-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 30rpx;
		background-color: #ffffff;
	}
	
	.nav-left {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	
	.nav-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
		flex: 1;
	}
	
	.nav-right {
		width: 60rpx;
		flex-shrink: 0;
	}
	
	/* 主内容区域 */
	.main-content {
		padding-top: 88rpx;
		padding-bottom: 120rpx;
	}
	
	/* 媒体区域 */
	.media-section {
		background-color: #ffffff;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
	}
	
	.media-container {
		position: relative;
		height: 400rpx;
		margin-bottom: 20rpx;
	}
	
	.project-image,
	.project-video {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
	}
	
	.media-type-tabs {
		display: flex;
		justify-content: center;
		padding: 0 30rpx;
	}
	
	.tab-item {
		padding: 10rpx 40rpx;
		color: #666;
		font-size: 28rpx;
		transition: all 0.3s;
		position: relative;
		margin: 0 20rpx;
	}
	
	.tab-item.active {
		color: #4CAF50;
	}
	
	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 4rpx;
		background-color: #4CAF50;
		border-radius: 2rpx;
	}
	
	/* 项目信息 */
	.project-info {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.price {
		color: #FF5722;
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #333;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #999;
	}
	
	/* 项目特点 */
	.project-features {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		color: #333;
	}
	
	.features-grid {
		display: flex;
		flex-wrap: wrap;
	}
	
	.feature-item {
		width: 50%;
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.feature-label {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 15rpx;
		color: #333;
	}
	
	.feature-value {
		font-size: 24rpx;
		color: #999;
		margin-left: 10rpx;
	}
	
	/* 认养流程 */
	.adopt-process {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.process-list {
		
	}
	
	.process-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
	}
	
	.process-item:last-child {
		margin-bottom: 0;
	}
	
	.process-icon {
		width: 80rpx;
		height: 80rpx;
		background-color: #f0f8f0;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		flex-shrink: 0;
	}
	
	.process-content {
		flex: 1;
	}
	
	.process-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #333;
	}
	
	.process-desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
	}
	
	/* 认养详情 */
	.adopt-details {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.detail-item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		font-size: 28rpx;
	}
	
	.detail-item:last-child {
		margin-bottom: 0;
	}
	
	.detail-label {
		color: #333;
		margin-right: 20rpx;
	}
	
	.detail-value {
		color: #666;
	}
	
	.quantity-control {
		display: flex;
		align-items: center;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		overflow: hidden;
	}
	
	.quantity-input {
		width: 80rpx;
		height: 60rpx;
		text-align: center;
		border: none;
		font-size: 28rpx;
	}
	
	.quantity-control .u-icon {
		padding: 20rpx;
		background-color: #f5f5f5;
	}
	
	/* 复选框样式 */
	.checkbox-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
	}
	
	.protocol-link {
		color: #4CAF50;
		font-size: 28rpx;
		margin-left: 10rpx;
	}
	
	/* 认养描述 */
	.adopt-description {
		background-color: #ffffff;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}
	
	.description-content {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}
	
	/* 底部导航栏样式 */
	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 999;
	}
	
	.nav-buttons {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.nav-button {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 40rpx;
	}
	
	.nav-button text {
		font-size: 20rpx;
		color: #666;
		margin-top: 4rpx;
	}
	
	.rent-button {
		width: 240rpx;
		height: 80rpx;
		background-color: #4CAF50;
		color: #ffffff;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
	}
	
	/* 协议链接样式 */
	.protocol-link {
		color: #4CAF50;
		text-decoration: underline;
	}
	
	/* 协议弹出层样式 */
	.protocol-popup {
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		height: 80vh;
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 100vw;
		box-sizing: border-box;
	}
	
	.protocol-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		flex-shrink: 0;
	}
	
	.protocol-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.protocol-content {
		flex: 1;
		padding: 0 30rpx;
		overflow-y: auto;
		box-sizing: border-box;
	}
	
	.protocol-text {
		padding: 20rpx 0;
		width: 100%;
		box-sizing: border-box;
	}
	
	.protocol-line {
		display: block;
		font-size: 28rpx;
		line-height: 1.6;
		color: #666;
		margin-bottom: 20rpx;
		word-wrap: break-word;
		word-break: break-all;
		white-space: pre-wrap;
		width: 100%;
		max-width: calc(100vw - 120rpx);
		overflow-wrap: break-word;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	.protocol-footer {
		padding: 30rpx;
		border-top: 1rpx solid #f0f0f0;
		flex-shrink: 0;
	}
	
	.confirm-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		background-color: rgb(102, 202, 77);
		transition: all 0.3s;
	}
	
	.confirm-btn.disabled {
		background-color: #cccccc;
		color: #999999;
	}
	
	.field-info { background:#fff; padding:24rpx 30rpx 0 30rpx; }
	.price-row { display:flex; align-items:baseline; }
	.price { color:#f00; font-size:40rpx; font-weight:bold; }
	.price-desc { color:#888; margin-left:8rpx; }
	.field-title { font-size:32rpx; font-weight:bold; margin:8rpx 0 4rpx 0; }
	.field-desc { color:#bbb; font-size:26rpx; }
	.field-location { display:flex; align-items:center; color:#4CAF50; font-size:26rpx; margin:8rpx 0 0 0; }
	.choose-field-section { background:#fff; margin-top:18rpx; padding:20rpx 30rpx; }
	.choose-title-row { display:flex; justify-content:space-between; align-items:center; }
	.choose-title { font-size:30rpx; font-weight:bold; }
	.choose-count { color:#bbb; font-size:24rpx; }
	.choose-status { display:flex; align-items:center; margin:12rpx 0; gap:16rpx; }
	.status-item { width:32rpx; height:32rpx; border-radius:8rpx; margin-right:4rpx; display:inline-block; }
	.status-available { background:#8d735b; }
	.status-selected { background:#6d5a4a; }
	.status-rented { background:#e0e0e0; }
	.field-scroll-horizontal {
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		margin: 10rpx 0;
		gap: 16rpx;
		white-space: nowrap;
	}
	.field-item {
		min-width: 80rpx;
		background: #8d735b;
		color: #fff;
		border-radius: 16rpx;
		margin-right: 16rpx;
		padding: 12rpx 8rpx;
		text-align: center;
		position: relative;
		display: inline-block;
	}

	.field-item.selected { background: #6d5a4a; }
	.field-item.rented { background: #e0e0e0; color: #bbb; }
	.field-item-texts {
		display: flex;
		flex-direction: column;
	}
	.field-area { font-size: 15px; }
	.field-name {
		font-size: 15px;
		width: 20px;
		display: block;
		padding-top: 10px;
		margin: 0 auto;
		text-align: center;
		word-break: break-all;
		white-space: normal;
		overflow-wrap: break-word;
	}
	.rent-period-row {
		width: 100%;
		background: #fff;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #f5f5f5;
	}
	.rent-title { font-size:28rpx; }
	.rent-tip { font-size:26rpx; width: 75%;padding-right: 10px;}
	.service-section { background:#fff; display:flex; padding:20rpx 30rpx; gap:20rpx; }
	.service-item { flex:1; border:1px solid #eee; border-radius:16rpx; padding:16rpx; text-align:center; }
	.service-item.active { border:2px solid #4CAF50; }
	.service-title { font-size:28rpx; font-weight:bold; }
	.service-price { display:block; font-size:26rpx; margin:6rpx 0; }
	.service-desc { color:#888; font-size:24rpx; }
	.seed-section { background:#fff; margin-top:18rpx; padding:20rpx 30rpx; }
	.seed-title-row { display:flex; justify-content:space-between; align-items:center; }
	.seed-title { font-size:30rpx; font-weight:bold; }
	.seed-more { color:#4CAF50; font-size:24rpx; }
	.seed-list { display:flex; flex-wrap:wrap; gap:20rpx; margin-top:10rpx; }
	.seed-item { width:140rpx; }
	.seed-img { width:100%; height:100rpx; border-radius:12rpx; object-fit:cover; }
	.seed-info { margin-top:6rpx; text-align: center;}
	.seed-name { font-size:24rpx; text-align: center; }
	.seed-yield { color:#888; font-size:22rpx; }
	.field-detail-section { background:#fff; margin-top:18rpx; padding:20rpx 30rpx; }
	.detail-title { font-size:30rpx; font-weight:bold; margin-bottom:8rpx; }
	.detail-content { color:#333; font-size:26rpx; line-height:1.6; }
	.field-icon {
		display: block;
		margin-left: 15px;
	
	}
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}
	.item {
		line-height: 100rpx;
		text-align: center;
	}
	.picker-container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		z-index: 9999;
	}
	.picker-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	.picker-header text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	.picker-header text.cancel {
		color: #888;
	}
	.picker-header text.confirm {
		color: #4CAF50;
	}

	/* 支付方式选择弹出层 */
	.payment-popup {
		padding: 30rpx;
		background-color: #ffffff;
	}
	
	.payment-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}
	
	.payment-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.payment-amount {
		font-size: 48rpx;
		color: #999;
		font-weight: bold;
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	.payment-methods {
		margin-bottom: 40rpx;
	}
	
	.payment-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		border: 1rpx solid #f0f0f0;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		transition: all 0.3s;
	}
	
	.payment-item.active {
		border-color: #4CAF50;
		background-color: #f8fff8;
	}
	
	.payment-info {
		display: flex;
		align-items: center;
		flex: 1;
	}
	
	.payment-icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
	}
	
	.wechat-icon {
		background-color: #09bb07;
		color: #ffffff;
		font-size: 24rpx;
	}
	
	.balance-icon {
		background-color: #ff6b6b;
		color: #ffffff;
		font-size: 24rpx;
		font-weight: bold;
	}
	
	.icon-img {
		width: 100%;
		height: 100%;
	}
	
	.payment-details {
		flex: 1;
	}
	
	.payment-name {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 5rpx;
	}
	
	.payment-desc {
		font-size: 24rpx;
		color: #666;
	}
	
	.payment-radio {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.payment-footer {
		padding-top: 20rpx;
	}
	
	.confirm-payment-btn {
		background-color: #4CAF50;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bold;
		padding: 25rpx;
		border-radius: 50rpx;
		text-align: center;
		width: 100%;
		box-sizing: border-box;
	}
	
	.radio-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		border: 2rpx solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s;
	}
	
	.radio-icon.selected {
		border-color: #4CAF50;
	}
	
	.radio-dot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #4CAF50;
	}
	
	
	
</style>
